<!-- 网格列表 现货 -->
<template>
  <div class="all" @rightBtn="rightBtn">
    <div class="all" v-if="datas != undefined">

      <div class="warning">
        <LImage class="warning-image" :src="config.img('warning.png')"></LImage>
        <text class="font24 warning-t1 all">{{T('选择强平的订单将立即撤销委托并以市价平仓')}}</text>
      </div>

      <div class="title" @click="allClick()">
        <text class="font24 text2 all">{{T('开仓价')+'('+baseCoin+')'}}</text>

        <div class="width20"></div>
        <text class="font24 text2 all">{{T('平仓价')+'('+baseCoin+')'}}</text>

        <div class="width20"></div>
        <text class="font24 text2 text-right all">{{T('数量')+'('+counterCoin+')'}}</text>

        <LImage class="image" :src="config.img((datas.length == selects.length && datas.length != 0) ? 'xuanzhong.png' :  'weixuan.png')"></LImage>
      </div>

      <div class="all">
        <VTips class="all" :text="T('无订单')" v-if="datas.length == 0 && stops.length == 0"></VTips>
          
        <scroller class="all">
          <div>
            
            <!--挂单中-->
            <div class="cell" v-for="(item, index) in datas" v-bind:key="'cell1'+index" @click="cellClick(item)">

                <text class="font28 text1 all">{{item.openOrder.dealPrice == undefined ? item.openOrder.price : item.openOrder.dealPrice}}</text>

                <div class="width20"></div>
                <text class="font28 text1 all">{{item.closeOrder == undefined ? '--' : item.closeOrder.price}}</text>

                <div class="width20"></div>
                <text class="font28 text1 text-right all">{{item.openOrder.dealAmount == undefined ? item.openOrder.amount : item.openOrder.dealAmount}}</text>

                <LImage class="image" :src="config.img(checkSelect(item, 'xuanzhong.png', 'weixuan.png'))"></LImage>
            </div>

            <!--强平中-->
            <div class="row acenter" v-if="stops.length">
              <div class="width40"></div>
              <div class="line no1"></div>
              <text class="font24 text2">{{T('强平中')}}</text>
              <div class="line no1"></div>
              <div class="width40"></div>
            </div>
            <div class="cell" v-for="(item, index) in stops" v-bind:key="'cell2'+index">

              <text class="font28 text2 all">{{item.openOrder.dealPrice == undefined ? item.openOrder.price : item.openOrder.dealPrice}}</text>

              <div class="width20"></div>
              <text class="font28 text2 all">{{item.closeOrder == undefined ? '--' : item.closeOrder.price}}</text>

              <div class="width20"></div>
              <text class="font28 text2 text-right all">{{item.openOrder.dealAmount == undefined ? item.openOrder.amount : item.openOrder.dealAmount}}</text>

              <div class="image"></div>
            </div>
          </div>
        </scroller>
      </div>
      
      <div :class="['but', selects.length ? 'main1' : 'no1']" @click="okClick">
        <text class="font30 text1">{{T('强平')}}</text>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.warning {
  flex-direction: row;
  background-color: rgba(240, 56, 105, 0.1);
  padding-top: 20px;
  padding-bottom: 20px;

  padding-left: 40px;
  padding-right: 40px;
}
.warning-image {
  width: 28px;
  height: 28px;
  margin-top:  3px;
  margin-right: 10px;
}

.title {
  flex-direction: row;
  align-items: center;
  height: 72px;

  padding-left: 40px;
  padding-right: 40px;
}

.cell {
  flex-direction: row;
  align-items: center;
  height: 96px;
  
  padding-left: 40px;
  padding-right: 40px;
}
.image {
  width: 28px;
  height: 28px;
  margin-left: 32px;
}
.text-right{
  text-align: right;
}

.line{
  flex: 1;
  height: 1px;
  margin-left: 40px;
  margin-right: 40px;
}

.but {
  justify-content: center;
  align-items: center;
  height: 80px;
  border-radius: 12px;

  margin-left: 40px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 60px;
}
</style>

<script>
//组件
import VTips from "@/public/view/VTips";

//功能
import https from "@/_js/https";
import modal from "@/_js/modal";
import config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('网格列表'));
weexFunction.setRightBtn(T('刷新'));

export default {

  data() {
    return {
      T:T,
      config:config,
      executeId:undefined,

      datas:[], //挂单中的订单
      stops:[], //强平中的订单
      selects:[], //选中订单

      baseCoin:'',
      counterCoin:'',
    };
  },

  beforeDestroy() {
  },

  created() {

    var param = weex.config;
    this.executeId = param.executeId;
    this.httpGridList();
  },

  components: {
    VTips,
  },
  
  //方法
  methods: {

    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      modal.showLoad();
      this.httpGridList();
    },

    /********************* 初始化*/
    initData(data) {
      
      this.counterCoin = data.counterCoin;
      this.baseCoin = data.baseCoin;
      
      var datas = [];
      var stops = [];
      var ids = data.selectOrderIds ? data.selectOrderIds : {};
      for (let index = 0; index < data.cellJson.cells.length; index++) {
        var cell = data.cellJson.cells[index];
        if (cell.closeOrder == undefined) {
          continue;
        }

        if (ids[cell.openOrder.id]) {
          stops.push(cell);
        } else {
          datas.push(cell);
        }
      }
      this.stops = stops;
      this.datas = datas;
    },

    /********************* HTTP*/
    //http网格列表
    httpGridList() {

      var param = {'executeId':this.executeId};
      https.post("strategyV3/queryGridList",JSON.stringify(param),true,(data) => {
        modal.hideLoad();
        if (data.status == 200) {
          data = data.data;
          this.initData(data);
        } else {
          modal.toast(data.msg);
        }
      });
    },

    //http强平
    httpMargin(){
      
      modal.showLoad();
      var orderIds = [];
      var ids = {}
      for (let index = 0; index < this.selects.length; index++) {
        var map = this.selects[index];
        orderIds.push(map.openOrder.id);
        ids[map.openOrder.id]=map.openOrder.id;
      }
      var param = {'executeId':this.executeId, 'orderIds':JSON.stringify(orderIds)};
      https.postX("strategyV3/cellMarginCall",JSON.stringify(param),true,(data) => {
        modal.hideLoad();
        if (data.status == 200) {
          
          var datas = [];
          var stops = [];
          stops.push(...this.stops);
          for (let index = 0; index < this.datas.length; index++) {
            var cell = this.datas[index];
            if (ids[cell.openOrder.id]) {
              stops.push(cell);
            } else {
              datas.push(cell);
            }
          }
          this.selects = [];
          this.datas = datas;
          this.stops = stops;
          modal.toast(T('已提交'));
        } else {
          modal.toast(data.msg);
        }
      });
    },

    /********************* 方法*/
    //检查选中  
    checkSelect(item, style1, style2){
      
      for (let index = 0; index < this.selects.length; index++) {
        var map = this.selects[index];
        if (map.openOrder.id == item.openOrder.id) return style1;
      }
      return style2;
    },
    
    /********************* 按钮*/
    //全选
    allClick() {
      if (this.selects.length == this.datas.length) {
        this.selects = [];
      } else {
        this.selects = JSON.parse(JSON.stringify(this.datas));
      }
    },

    //列表点击
    cellClick(item) {

      for (let index = 0; index < this.selects.length; index++) {
        var map = this.selects[index];
        if (map.openOrder.id == item.openOrder.id) {
          this.selects.splice(index, 1);
          return;
        }
      }

      this.selects.push(item);
    },

    //强平
    okClick() {
      if (!this.selects.length) {
        return;
      }

      var parm = {title:T("确认强平?"),
                  message:T("确认强平的订单将立即撤销委托并以市价平仓，浮动盈亏将转为实现盈亏，请谨慎操作。"),
                  okBtn:T("确认"), cancelBtn:T("取消")};
      modal.confirm(parm, (bool)=>{
        if (bool == "true") {
          this.httpMargin();
        }
      });
    },
  },
  
};
</script>
